<%@ include file="include/base.jsp" %>
<%@page import="entity.Contact"%>
<%@page import="service.ContactService"%>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>凯盛项目管理系统</title>
	
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="../css/bootstrap-responsive.css">
	<link rel="stylesheet" href="../css/docs.css">
	
	
</head>
<body class="body">
	<% pageContext.setAttribute("left", "contact"); %>
	<%@ include file="include/top.jsp" %>
	
	
	<div class="container">
	  <div class="row">
		<%@ include file="include/left.jsp" %>
		<div class="span9">
			
			<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0">
				<li class="active">
					<a href="task.html"><i class="icon-user"></i>联系人</a>
				</li>
			</ul>
			<div class="wall">
				<div class="row">
					<div class="span3">
						<a href="gonewcontact.jspx" class="btn span2"><i class="icon-plus"></i>添加联系人</a>
						<div class="clear"></div>
						<ul class="unstyled" style="margin-top:15px">
						<!-- 这是显示联系人的 -->
							<c:forEach var ="listItem" items="${list}" varStatus="contacts"  >
							<li style="line-height:30px">
								<i class="icon-list-alt"></i><a href="javascript:;" class = "value" value = "${listItem.id}">${listItem.contactname}</a>
							</li>
							</c:forEach>
						</ul>
						
					</div>
					<div class="span5" style="min-height:400px;border-left:1px solid #ccc;padding-left:15px">
						<address id = "imformation">
							<h3 id= "contactname">${contact.contactname}</h3>
							<p id = "company">${contact.company}</p>
							<small >手机</small> <span id= "tel">${contact.tel}</span><br/>
							<small >固话</small><span id= "fixedtel">${contact.fixedtel}</span><br/><br/>
							<small >邮箱</small><span id= "mail">${contact.mail}</span><br/>
							<small >地址</small> <span id= "address">${contact.address}</span><br/><br/>
							<small>主页</small> <a href="${listItem.homepage}"  id= "homepage">${contact.homepage}</a><br/>
							<small >微博</small> <a href="${blogname}" id= "blogname">${contact.blogname}</a><br/>
						</address>
						
							
						<div class="line">记录</div>
						<div id = "replace">
						<c:forEach var ="recrod" items="${recrod}" varStatus="contacts"  >
							<blockquote>
						  <span>${recrod.content }</span>
						  <small>${recrod.createtime }</small>
						</blockquote>
							</c:forEach>
							
						
						
						</div>
						<div id = "contactid"> 
						<a href="gocontactnote.jspx?id=${contact.id}" class= "allrecord">查看所有记录</a>
						</div> 
						<br/><br/><br/>
						<a class="btn btn-primary" href="edit_contact.html"><i class="icon-pencil icon-white"></i>编辑</a>
						<a class="btn btn-danger"><i class="icon-trash icon-white"></i>删除</a>
					</div>
				</div>
			</div>
			
		</div>
	  </div>
	</div>
	<!-- 下面的是模板 -->
	<script type="text/template" id="template">

		<h3>{{contactname}}</h3>
		<p>{{company}}</p>
		<small>手机</small> <span>{{tel}}</span><br/>
		<small>固话</small><span>{{fixedtel}}</span><br/><br/>
		<small>邮箱</small><span>{{mail}}</span><br/>
		<small>地址</small> <span>{{address}}</span><br/><br/>
		<small>主页</small> <a href="${listItem.homepage}">{{homepage}}</a><br/>
		<small>微博</small> <a href="${blogname}">{{blogname}}</a><br/>	
	</script>
	
	<script type="text/template" id="show">
		<blockquote>
			<span>{{content}}</span>
			<small>{{createtime}}</small>
		</blockquote>
		
	</script>
	
	<script type="text/template" id = "id">
		<a href="gocontactnote.jspx?id={{id}}" class= "allrecord">查看所有记录</a>
	</script>
	
	<script type="text/javascript">
		$(function(){
			$(".value").click(function(){
			//这是联系人信息显示的ajax
				$.ajax({
				data:{id:$(this).attr("value")},
				type:"get",
				url:"contactinformationdisplay.jspx",
				success:function(data){
			 var template = document.getElementById("template").innerHTML;
				template = template.replace(/{{contactname}}/g,data.contactname).replace(/{{company}}/g,data.company).replace(/{{tel}}/g,data.tel).replace(/{{fixedtel}}/g,data.fixedtel).replace(/{{mail}}/g,data.mail).replace(/{{address}}/g,data.address).replace(/{{homepage}}/g,data.homepage).replace(/{{blogname}}/g,data.blogname);
				document.getElementById("imformation").innerHTML =  template;
				//拿到点击查看所有人记录的时，当前联系人的id
				var temp = document.getElementById("id").innerHTML;
				temp = temp.replace(/{{id}}/g,data.id);
				document.getElementById("contactid").innerHTML =  temp;
				
				
				 /*  不使用使用模板来做$("#contactname").html(data.contactname);
				$("#company").h
				tml(data.company);
				$("#tel").html(data.tel);
				$("#fixedtel").html(data.fixedtel);
				$("#mail").html(data.mail);
				$("#address").html(data.address);
				$("#homepage").html(data.homepage);
				$("#blogname").html(data.blogname);  */
				//使用模板来替换标签体的内容
				var html = "";
				for(var i=0 ;i < data.records.length;i++){
					html = html + document.getElementById("show").innerHTML.replace(/{{content}}/g,data.records[i].content).replace(/{{createtime}}/g,data.records[i].createtime);
				
				}
				//将模板的内容进行替换
				$("#replace").html(html);
			
				}, 
				
				}); 
				
			});
		
		
	
			
			});
		
		
	
		
		
	
	
	
	
	
	
	</script>
	
	
	
	
	
	
	
	
	
	
	
	
</body>
</html>